<form nz-form
      [formGroup]="form"
      (ngSubmit)="submit()"
      role="form">
  <nz-tabset [nzAnimated]="false"
             class="tabs"
             (nzSelectChange)="switch($event)">
    <nz-tab [nzTitle]="'账户密码登录'">
      <!--      <nz-alert *ngIf = "error | async as err"-->
      <!--                [nzType] = "'error'"-->
      <!--                nzMessage = "登录失败!账号密码错误"-->
      <!--                [nzShowIcon] = "true"-->
      <!--                class = "mb-lg" ></nz-alert >-->
      <nz-form-item>
        <nz-form-control nzErrorTip="用户名长度必须大于3">
          <nz-input-group nzSize="large"
                          nzPrefixIcon="user">
            <input nz-input
                   nzSize="large"
                   formControlName="userName"
                   placeholder="输入用户名"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入你的密码">
          <nz-input-group nzSize="large"
                          nzPrefixIcon="lock">
            <input nz-input
                   nzSize="large"
                   type="password"
                   formControlName="password"
                   placeholder="输入密码"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
    <nz-tab [nzTitle]="'手机号登录'">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzSize="large"
                          nzPrefixIcon="user">
            <input nz-input
                   formControlName="mobile"
                   placeholder="输入您的手机号"/>
          </nz-input-group>
          <nz-form-explain *ngIf="mobile.dirty && mobile.errors">
            <ng-container *ngIf="mobile.errors.required">
              请输入手机号！
            </ng-container>
            <ng-container *ngIf="mobile.errors.pattern">
              手机号格式错误！
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large"
                              nzPrefixIcon="mail">
                <input nz-input
                       formControlName="captcha"
                       placeholder="输入验证码"/>
              </nz-input-group>
              <nz-form-explain *ngIf="captcha.dirty && captcha.errors">
                请输入验证码！
              </nz-form-explain>
            </nz-col>
            <nz-col [nzSpan]="8">
              <button
                type="button"
                nz-button
                nzSize="large"
                (click)="getCaptcha()"
                [disabled]="count"
                nzBlock
              >
                {{ count ? count + 's' : ('获取验证码') }}
              </button>
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
  </nz-tabset>
  <nz-form-item>
    <nz-col [nzSpan]="12">
      <label nz-checkbox style="color: white"
             formControlName="remember">自动登录</label>
    </nz-col>
    <nz-col [nzSpan]="12"
            class="text-right">
      <a class="forgot"
         (click)="msg.error('请找欧阳锋')">忘记密码</a>
    </nz-col>
  </nz-form-item>
  <nz-form-item>
    <button nz-button
            type="submit"
            nzType="primary"
            nzSize="large"
            nzBlock>
      登录
    </button>
  </nz-form-item>
</form>
<div class="other">
  其他登录方式 <i
  nz-tooltip="微信扫描二维码登录"
  (click)="open('auth0', 'window')"
  nz-icon
  nzType="wechat"
  class="icon"
></i> <i nz-tooltip="支付宝二维码登录"
         (click)="open('github','window')"
         nz-icon
         nzType="alipay-circle"
         class="icon"></i>
</div>
